<template>
  <div class="public">
    <header class="header">
      <button class="back-button" @click="handleBackClick">返回</button>
      <h1 class="header-title">实时检测</h1>
    </header>
    <el-main style="background-color: #f3f4f6; flex: 1" class="main">
      <el-form
        label-position="left"
        label-width="auto"
        style="max-width: 600px"
        :model="feedbackForm"
      >
        <el-form-item label="目的地址：">
          <el-text>{{ curListInfo.faddress }} </el-text>
        </el-form-item>
        <el-space fill>
          <el-alert type="info" show-icon :closable="false">
            <p>二氧化硫（SO₂）的实际浓度</p>
          </el-alert>
          <el-form-item label="SO₂ 浓度/(μg/m³)" prop="so2value" :rules="rules">
            <el-input v-model.number="feedbackForm.so2value" type="text" autocomplete="off" />
          </el-form-item>
        </el-space>
        <el-space fill>
          <el-alert type="info" show-icon :closable="false">
            <p>一氧化碳（CO）的实际浓度</p>
          </el-alert>
          <el-form-item label="CO 浓度/(mg/m³)" prop="covalue" :rules="rules">
            <el-input v-model.number="feedbackForm.covalue" />
          </el-form-item>
        </el-space>
        <el-space fill>
          <el-alert type="info" show-icon :closable="false">
            <p>可吸入颗粒物（SPM）的实际浓度</p>
          </el-alert>
          <el-form-item label="SPM 浓度/(μg/m³)" prop="spmvalue" :rules="rules">
            <el-input v-model.number="feedbackForm.spmvalue" />
          </el-form-item>
        </el-space>
        <el-form-item>
          <el-button @click="goback">cancel</el-button>
          <el-button @click="fcommit">commit</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </div>
</template>

<script setup>
import { alertMsg } from '@/utils/msg.js'

import { useRouter } from 'vue-router'

import { Gridors } from '@/stores/gridor.js'
import { storeToRefs } from 'pinia'

const gridors = Gridors()

const { rules, feedbackForm, curListRow, curRes, curListInfo } = storeToRefs(gridors)

const router = useRouter()

const fcommit = () => {
  var promise = gridors.commit()
  console.log(promise)
  gridors.clearRes()
  setTimeout({}, 2000)
  gridors.goback()
}
const handleBackClick = () => {
  // 跳转回上一页
  gridors.goback()
}
</script>

<style lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.back-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #007bff;
}

.header-title {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.divider {
  height: 1px;
  background-color: #e0e0e0;
  margin: 0 20px;
}
.aqi {
  background-color: #f1f5f9;
}

.public {
  width: 410px;
  height: 640px;
}

.main {
  flex: 1; /* 填充剩余高度 */
  background-color: #f4f4f5; /* 示例背景色 */
  padding: 20px;
}
</style>
